<template>
	<el-card class="box-card">
		<div ref="chartRef" style="width: 100%; height: 600px;"></div>
	</el-card>
</template>

<script setup>
	import {
		ref,
		onMounted,
		onBeforeUnmount,
		getCurrentInstance,
		defineEmits 
	} from 'vue';
	import * as echarts from 'echarts';
	import * as XLSX from 'xlsx';
	import * as math from 'mathjs';
	import * as chart from './js/initchart.js'
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus'
	const {
		proxy
	} = getCurrentInstance()
	const emit = defineEmits(['update-data']);
	const chartRef = ref(null);
	let chartInstance = null;


	const setEcharts = () => {
		chartInstance = echarts.init(chartRef.value);

		const option = chart.getOption(echartsResult.value)

		chartInstance.setOption(option);


	};
	const echartsResult = ref({})
	const startingOption= ref([])
	// 画图
	const getDraw = () => {
	  return new Promise(async (resolve, reject) => {
	    try {
	     
	      echartsResult.value = {}
		  // 1 焙烧 2 煅烧
		  proxy.$request.getChart({workShopId:'2'}).then((res => {
		  
		  	
		  	if (res.data.code === 200 && res.data.result.list.length > 0) {
				emit('update-data', res.data.result.realtimeData);
		  		echartsResult.value= res.data.result
				
				
				if (echartsResult.value.series['状态']) {
				  let indexList = []
				  echartsResult.value.series['状态'].map((item, index) => {
				    if (echartsResult.value.series['状态'][index - 1] !== 1 && echartsResult.value.series['状态'][index] === 1) {
				       indexList.push(index)
				    }
				  })
				
				  indexList.map((item, index) => {
				    startingOption.value.push({
				      label: `第${index + 1}个起点`,
				      value: echartsResult.value.times[item]
				    })
				  })
				  
				} else {
				  startingOption.value = []
				}
				setEcharts()
		  
		  	} else {
		  
		  		ElMessage.error(res.data.message)
		  	}
		  })).catch((err => {
		  	console.log('err', err)
			ElMessage.error(err)
		  }))
		  
		  
	
	    } catch (err) {
	      console.log('err', err)
	    
	      
	  
	    }
	  })
	}
	let intervalId = null;
	onMounted(() => {
		getDraw()
		intervalId = setInterval(()=>{
			setTimeout(()=>{
				getDraw()
			},1000)
		},1000*30);
	})
	
	onBeforeUnmount(() => {
		if (intervalId) {
		    clearInterval(intervalId);
		  }
	})
</script>
<style lang="scss" scoped>
	.box-card {
		padding: 20px;
		box-sizing: border-box;
	}
</style>